<html>
<head>
  <title>Vega Scaffold</title>
  <script src="http://trifacta.github.com/vega/d3.v3.min.js"></script>
  <script src="http://trifacta.github.com/vega/vega.js"></script>
</head>
<body>
  <div id="chart"></div>
  <script type="text/javascript">
  // parse a spec and create a visualization view
  function parse(spec) {
    vg.parse.spec(spec, function(chart) { 
      chart({el:"#chart"}).update(); 
    }); 
  }
  parse({
  "width": 500,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 55, "c":1},
        {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 91, "c":1},
        {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 53, "c":1},
        {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 87, "c":1},
        {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1},
        {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 49, "c":1},
        {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1},
        {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1},
        {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1},
        {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 15, "c":1}
      ]
    },
    {
      "name": "stats",
      "source": "table",
      "transform": [
        {"type": "facet", "keys": ["data.x"]},
        {"type": "stats", "value": "data.y"}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {"data": "table", "field": "data.x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "stats", "field": "sum"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category10"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "data": "table",
        "transform": [
          {"type": "facet", "keys": ["data.c"]},
          {"type": "stack", "point": "data.x", "height": "data.y"}
        ]
      },
      "marks": [
        {
          "type": "area",
          "properties": {
            "enter": {
              "interpolate": {"value": "monotone"},
              "x": {"scale": "x", "field": "data.x"},
              "y": {"scale": "y", "field": "y"},
              "y2": {"scale": "y", "field": "y2"},
              "fill": {"scale": "color", "field": "data.c"}
            },
            "update": {
              "fillOpacity": {"value": 1}
            },
            "hover": {
              "fillOpacity": {"value": 0.5}
            }
          }
        }
      ]
    }    
  ]
});
  </script>
</body>
</html>